<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ajax upload</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
</head>

<body>

    <p>原生js+原生ajax方式上传提交</p>
    <!-- 包含上传文件的必要参数 enctyoe -->
    {% csrf_token %}
    <input id="Upfile" type="file" multiple="multiple">
    <a onclick="Js_Ajax();">提交</a>

    <script>
        function Js_Ajax() {
            var xhr = new XMLHttpRequest(); //创建一个空对象，用于传输后端
            xhr.onreadystatechange = function () { //指定回调函数
                if (xhr.readyState == 4) { //回调函数状态判断
                    console.log("返回信息：", xhr.responseText);
                    alert("文件已经上传成功，点击确定刷新页面");
                    location.reload();
                }
            };
            xhr.open('POST', '/ajaxTest/jq_upload/'); //建立POST方式请求
            xhr.setRequestHeader('Conten-Type', 'application/x-www-foorm-urlencoded;charset-UTF-8'); //POST数据请求头

            var f_obj = document.getElementById("Upfile").files[0]; //获取上传文件对象
            console.log("文件对象：", f_obj);
            console.log("文件名称是：", f_obj.name);
            console.log("文件大小是：", f_obj.size);

            var data = new FormData(); //创建formdata对象，便于将文件传输到后端
            data.append("file", f_obj); //在formdata对象中添加(封装)文件对象

            var token = $('input[name=csrfmiddlewaretoken]').val();
            data.append('csrfmiddlewaretoken', token); // 在Django中使用ajax post向后台传送数据时会出现403 Forbidden (CSRF token missing or incorrect.): 的报错，解决方法。

            xhr.send(data); //建立的POST请求发送的数据
        };
    </script>
</body>

</html>